<template>
    <div :class="cn">
        <slot :active="active"></slot>
    </div>
</template>
<script lang="ts">
import { defineComponent , ref ,computed, inject, watch, Ref } from 'vue'
import {TabPanelStatus} from './struct'
export default defineComponent({
    name:"TabPanel",
    props:{
        id:{type:Number},
        title:{type:String,default:''},
        icon:{type:String}
    },
    setup(props){
        const current = inject("current") as Ref<number>
        const status = ref(props.id===current.value?TabPanelStatus.show:TabPanelStatus.right)

        watch(()=>current?.value,(v,o)=>{
            if(props.id===v) status.value = TabPanelStatus.show
            else if(props.id===o){
                status.value = v>o?TabPanelStatus.left:TabPanelStatus.right
            }
        })
        const active = computed(()=>{
            return current?.value===props.id
        })
        const cn = computed(()=>{
            return {
                'ph-tab-panel':true,
                'ph-tab-panel-show':status.value===TabPanelStatus.show,
                'ph-tab-panel-left':status.value===TabPanelStatus.left,
                'ph-tab-panel-right':status.value===TabPanelStatus.right
            }
        })
        return {cn,active}
    }
})
</script>
<style lang="scss">
.ph-tab-panel{
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    transform:translateX(100%);
    transition:transform .2s ease-in-out;
    width: 100%;
    padding:var(--ph-10) 0;
    box-sizing:border-box;
    overflow-y:auto ;
    -webkit-overflow-scrolling:touch;
    &-show{
        transform:translateX(0);
    }
    &-left{
        transform:translateX(-105%);	
    }
    &-right{
        transform:translateX(105%);	
    }
}
</style>
